import React, {Component} from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  StatusBar,
  TextInput,
  TouchableOpacity,
  ActivityIndicator,
} from 'react-native';
import AreaSelect from '../components/AreaSelect';
import {showToast, checkMobile, isvalidPassword} from '../utils';
import Api from '../Api';
import {Actions} from 'react-native-router-flux';

export default class RegisterScreen extends Component {
  state = {
    phone: '',
    smsCode: '',
    clickCode: false,
    count: 60,
    password: '',
    passwordAgain: '',
    loading: false,
  };
  handleSubmit = () => {
    const {phone, smsCode, password, passwordAgain} = this.state;
    if (!phone) {
      showToast('请输入手机号');
      return;
    }
    if (!checkMobile(phone)) {
      showToast('手机号格式不正确');
      return;
    }
    if (!smsCode) {
      showToast('请输入验证码');
      return;
    }
    if (!password) {
      showToast('请输入密码');
      return;
    }
    if (!isvalidPassword(password)) {
      showToast('请输入8-16位，字母及数字组合的密码');
      return;
    }
    if (password !== passwordAgain) {
      showToast('两次密码输入不一致');
      return;
    }
    this.setState({
      loading: true,
    });
    Api.resetPassword({
      cellphone: phone,
      password: password,
      captcha: smsCode,
    })
      .then(res => {
        this.setState({
          loading: false,
        });
        showToast('密码修改成功');
        setTimeout(() => {
          Actions.pop();
        }, 500);
      })
      .catch(_ => {
        this.setState({
          loading: false,
        });
      });
  };
  handleGetCode = () => {
    const {phone, clickCode} = this.state;
    if (clickCode) return;
    if (!phone) {
      showToast('请输入手机号');
      return;
    }
    if (!checkMobile(phone)) {
      showToast('手机号格式不正确');
      return;
    }
    this.setState({
      clickCode: true,
      count: 60,
    });

    Api.getCaptcha(phone).then(res => {
      console.log(res);
      if (res.status === 200) {
        clearInterval(this.timer);
        this.startTime = new Date().getTime();
        this.timer = setInterval(() => {
          let countDownTime = Math.round(
            60 - (new Date().getTime() - this.startTime) / 1000,
          );
          if (countDownTime <= 0) {
            this.setState({
              clickCode: false,
              count: 60,
            });
            clearInterval(this.timer);
          } else {
            this.setState({
              count: countDownTime,
            });
          }
        }, 1000);
      } else {
        this.setState({
          clickCode: false,
          count: 60,
        });
        clearInterval(this.timer);
      }
    });
  };
  render() {
    const {
      loading,
      clickCode,
      count,
      phone,
      smsCode,
      password,
      passwordAgain,
    } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#5096fc" />
        <View style={styles.commonItem}>
          <View style={styles.label}>
            <Text style={styles.labelText}>手机号</Text>
          </View>
          <TextInput
            placeholder="请输入手机号"
            style={styles.ipt}
            maxLength={11}
            keyboardType="numeric"
            value={phone}
            onChangeText={value => this.setState({phone: value})}
          />
        </View>
        <View style={styles.commonItem}>
          <View style={styles.label}>
            <Text style={styles.labelText}>验证码</Text>
          </View>
          <TextInput
            placeholder="请输入验证码"
            style={styles.ipt}
            keyboardType="numeric"
            value={smsCode}
            onChangeText={value => this.setState({smsCode: value})}
          />
          <TouchableOpacity
            style={styles.smsCode}
            activeOpacity={clickCode ? 1 : 0.2}
            onPress={this.handleGetCode}>
            <Text style={{color: clickCode ? '#ccc' : '#5196FD'}}>
              {clickCode ? count : '发送验证码'}
            </Text>
          </TouchableOpacity>
        </View>
        <View style={styles.commonItem}>
          <View style={styles.label}>
            <Text style={styles.labelText}>密码</Text>
          </View>
          <TextInput
            secureTextEntry
            placeholder="请输入密码"
            value={password}
            style={styles.ipt}
            onChangeText={value => this.setState({password: value})}
          />
        </View>
        <View style={styles.commonItem}>
          <View style={styles.label}>
            <Text style={styles.labelText}>确认密码</Text>
          </View>
          <TextInput
            secureTextEntry
            placeholder="请再次输入密码"
            value={passwordAgain}
            style={styles.ipt}
            onChangeText={value => this.setState({passwordAgain: value})}
          />
        </View>
        <TouchableOpacity
          onPress={this.handleSubmit}
          style={[styles.buttonStyle, loading && styles.disableButtonStyle]}>
          {loading ? (
            <ActivityIndicator
              style={{marginRight: 5}}
              color="#fff"
              size="small"
            />
          ) : null}
          <Text style={styles.buttonTextStyle}>确认</Text>
        </TouchableOpacity>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 15,
  },
  style: {
    color: '#333',
  },
  commonItem: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 40,
    borderBottomColor: 'rgba(151, 151, 151, 0.2)',
    borderBottomWidth: 0.5,
    marginHorizontal: 15,
  },
  label: {
    width: 80,
  },
  labelText: {
    fontSize: 15,
    color: '#000',
  },
  ipt: {
    flex: 1,
    color: '#000',
    fontSize: 15,
  },
  buttonStyle: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    backgroundColor: '#5196FD',
    borderRadius: 4,
    marginTop: 26,
    marginHorizontal: 15,
  },
  disableButtonStyle: {
    opacity: 0.5,
  },
  buttonTextStyle: {
    color: '#fff',
    fontSize: 15,
  },
  smsCode: {
    borderLeftColor: 'rgba(151, 151, 151, 0.2)',
    borderLeftWidth: 1,
    paddingLeft: 5,
    width: 80,
    flexDirection: 'row',
    justifyContent: 'center',
  },
});
